{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/js/Swiper-4.0.7/swiper.min.css" />
<link rel="stylesheet" href="__STATIC__/mobile/default/css/index.css" />
<style>
  img {
    max-width: 100%;
    max-height: 100%;
  }

  .m {
    padding: 10px;
  }

  .girdBox {
    padding-bottom: 0;
  }

  /*.index-header {
    background-color: #e0133c;
  }*/


  #swiper01 {
    border-radius: 0.1rem;
    overflow: hidden;
    margin-bottom: -0.5rem;
    z-index: 100;
  }

  #swiper01 .swiper-slide img {
    height: 1.8rem;
  }

  .gird {
    margin: 0;
    padding-top: 0.4rem;
    z-index: 99;
  }

  .trademark .googslist {
    margin-top: 0;
  }

  .trademark .van-grid-item__content {
    padding: 0;
  }

  .goods {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0.15rem;
    border: 1px solid #ccc;
    overflow: hidden;
    position: relative;
  }
	.goods i{ display: block; position: absolute; top: 0; left: 0; z-index: 99999;  background: url('__STATIC__/images/hot.png')no-repeat center; height: 0.35rem; width: 0.4rem; background-size:100% ; }
	.goodss i{ display: block; position: absolute; top: -0.01rem; left: 0; z-index: 99999;  background: url('__STATIC__/images/ideal.png')no-repeat center; height: 0.6rem; width: 0.6rem; background-size:100% ; }
.goodsss i{ display: block; position: absolute; top: -0.01rem; left: 0; z-index: 99999;  background: url('__STATIC__/images/new.png')no-repeat center; height: 0.6rem; width: 0.6rem; background-size:100% ; }
  .goods-content {
    padding: 0.1rem;
    border-radius: 0 0 0.16rem 0.16rem;
    background-color: #FFF;
  }
    .goodsss img{ height:1.8rem; }
  .van-grid-item__content {
    background-color: transparent;
  }

  #swiper01 .swiper-pagination {
    bottom: 0.3rem;
  }

  .van-multi-ellipsis--l1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .search-box{ display: flex; background: {$setcolor}; padding-right: 0.6rem; position: relative; }
  .search-box .search-url{ display: block; width: 100%; }
  .van-search{ padding: 0 15px 10px 25px;background:{$setcolor} !important; width: 100%; }
  .search-box span{ display: block; height: 34px; width:34px; line-height: 34px; text-align: center; position: absolute; top: 0; right: 0.2rem; }
  .search-box span img{ width: 82%;  }   
 	.van-field__control{ height: 24px !important; line-height: 24px; }   
 	.van-grid-item__content--surround::after{border: none;}
 	.newmark .van-grid-item{ flex-basis: 100% !important; margin-bottom:15px; }
  	.newmark .van-grid-item .goodss img{ height: 1.8rem; }
  	
  	
  	.trade-box{ display:flex; padding:0 0.05rem; }
  	.trade-box .item{ width:50%; padding:0 0.05rem;  }
  	.trade-box .item  li.last{ padding-top:0.1rem; }           
  	
</style>

{/block}
{block name="main" }
<!--{eq name="$tipsubscribe" value="1"}-->
<!--<div class="topTips">-->
<!--  <div class="flexBox">-->
<!--    <div class="cell_bd"><img src="__STATIC__/mobile/default/images//APPLOGO.png" alt=""><span-->
<!--        class="fs28 color_w">您当前还未关注微信公众号</span></div>-->
<!--    <div class="cell_ft">-->
<!--      <p class="fs28 fw_b color_r">立即关注</p><img src="__STATIC__/mobile/default/images/close_w.png" alt="">-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<!-- 扫码关注 -->
<!--<div class="model">-->
<!--  <div class="modelBG closeModel"></div>-->
<!--  <div class="medelCanten">-->
<!--    <div class="codeBox">-->
<!--      <img src="{$setting.weixin_qrcode}" alt="">-->
<!--      <span class="fs30 color_3 fw_b">长按二维码识别关注</span>-->
<!--    </div>-->
<!--    <img src="__STATIC__/mobile/default/images/close_wy.png" alt="" class="closeimg closeModel">-->
<!--  </div>-->
<!--</div>-->
<!--{/eq}-->

<div class="page-bd" id="app" style="display: none;">
  <!-- 页面内容-->
  <div class="search-box">
  	<a href="{:url('shop/index/search')}" class="search-url" >
    <van-search placeholder="请输入搜索关键词" shape="round"></van-search></a>
    <a href="{:url('shop/index/allSort')}" ><span><img src="__STATIC__/images/hs-cary.png" /></span></a>
  </div>
  
  <div class="m index-header p-t0">
    <div class="swiper-container swiper1" id="swiper01" style="background:#f2f2f2;">
      <div class="swiper-wrapper">
        {volist name="slideList" id="slide" }
        <a href="{$slide.url}" class="swiper-slide">
        	<img data-src="{$slide.imgurl}" class="swiper-lazy" />
          <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </a>
        {/volist}
      </div>
      <div class="swiper-pagination pagination1"></div>
    </div>
  </div>
  <!-- 功能入口-->
  {notempty name="navMenuList"}
  <div class="girdBox ">
    <div class="gird">
      <div class="row">
        {volist name="navMenuList" id="nav" }
        {if condition="$i==6"}
      </div>
      <div class="row">
        {/if}
        <a href="{$nav.url}" class="box">
          <van-image src="{$nav.imgurl}" class="nav-pic" width="40px" height="40px" round></van-image>
          <span class="fs26 color_3">{$nav.title}</span>
        </a>

        {/volist}
      </div>
    </div>
  </div>
  {/notempty}
<div style="margin: 0.08rem 0.08rem;">
      <img src="__STATIC__/images/indexde.png" />  
</div>


  <!-- <div class="trademark bg" style="padding-bottom: 0;">
    <div class="hot-title flex pt-2 pb-1">
      <div class="flex-item left font-md color_3">热销Top</div>
      <div class="fs26 color_9 flex-center" @click="toggleGoods">
        <van-icon name="replay"></van-icon>换一批
      </div>
    </div>
    <van-grid :gutter="10" :column-num="3">
      <van-grid-item class="goods-item" v-for="(item, index) in randGoods" :key="index">
        <a :href="'/shop/goods/info/id/'+item.goods_id+'.html'" class="goods">
        	<i></i>
          <van-image width="100%" height="100px" :src="item.goods_thumb" class="goods-pic"></van-image>
          <div class="goods-content">
            <span class="fs26 color_3 van-multi-ellipsis--l1">{{ item.goods_name }}</span>
            <div class="color_r fs20 num">
              <p class="fw_b fm_p">￥<em class="fs30">{{ item.shop_price }}</em></p>
            </div>
          </div>
        </a>
      </van-grid-item>

    </van-grid>
    <div class="googslist">
      {volist name="cg.gooodsList" id="goods" }
      <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">
        <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$goods.goods_thumb}" class="lazy"
          alt="">
        <span class="fs26 color_3">{$goods.goods_name}</span>
        <div class="color_r fs20 num">
          <p class="fw_b fm_p">￥</p><em class="fs30">{$goods.exp_price[0]}</em>
          <p>.{$goods.exp_price[1]}</p>
        </div>
      </a>
      {/volist}
    </div>
    <a href="{:url('goods/index',['cid'=>$cg['id']])}" class="fs26 color_3 trademarkMore">查看更多</a>
  </div> -->
  
  <!-- <div class="trademark newmark">
    <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$cg.cover}" alt="" class="lazy trademarkBG">
    <div class="hot-title flex pt-2 pb-1">
      <div class="flex-item left font-md color_3">每周快报</div>
      <a href="#" class="flex-center"><span class="fs26 color_9">更多</span><img src="__STATIC__/mobile/default/images/rightIcon.png" alt="" style="width: 6px;"></a>
    </div>
    
    <div class="trade-box">
        <div class="item">
            <a href="http://qudonglishop2.ruanjian8app.com/shop/goods/index/cid/27"><img src="__STATIC__/images/hs-index01.png" /></a>
        </div>
        <div class="item">
            <ul>
                <li> <a href="http://qudonglishop2.ruanjian8app.com/shop/goods/index/cid/51"><img src="__STATIC__/images/hs-index02.png" /></a></li>
                <li class="last"> <a href="http://qudonglishop2.ruanjian8app.com/shop/goods/index"><img src="__STATIC__/images/hs-index03.png" /></a></li>
            </ul>
        </div>
    </div>
  </div> -->

  
  <!-- 秒杀
        <div class="seckill" style="display:none;">
            <div class="title">
              <div class="left"><p class="fs36 color_3 fw_b">今日秒杀</p><div class="time"><div>00</div><span>:</span><div>30</div><span>:</span><div>10</div></div></div>
              <a href="#" class="right"><span class="fs26 color_9">更多</span><img src="__STATIC__/mobile/default/images/rightIcon.png" alt=""></a>
            </div>
            <div class="seckilllist">
                <a href="商品.html" class="box">
                  <img src="__STATIC__/mobile/default/images/seckillimg.png" alt="">
                  <span class="fs28 color_3">补水保湿套装</span>
                  <div class="color_r fs24 num"><p class="fw_b fm_p">￥</p><em class="fs36">199</em><p>.00</p></div>
                </a>
                <div class="box">
                    <img src="__STATIC__/mobile/default/images/seckillimg.png" alt="">
                    <span class="fs28 color_3">补水保湿套装补湿套装</span>
                    <div class="color_r fs24 num"><p class="fw_b fm_p">￥</p><em class="fs36">199</em><p>.00</p></div>
                  </div>
                  <div class="box">
                      <img src="__STATIC__/mobile/default/images/seckillimg.png" alt="">
                      <span class="fs28 color_3">补水保湿套装</span>
                      <div class="color_r fs24 num"><p class="fw_b fm_p">￥</p><em class="fs36">199</em><p>.00</p></div>
                    </div>
                    <div class="box">
                        <img src="__STATIC__/mobile/default/images/seckillimg.png" alt="">
                        <span class="fs28 color_3">补水保湿套装</span>
                        <div class="color_r fs24 num"><p class="fw_b fm_p">￥</p><em class="fs36">199</em><p>.00</p></div>
                      </div>
                      <div class="box">
                          <img src="__STATIC__/mobile/default/images/seckillimg.png" alt="">
                          <span class="fs28 color_3">补水保湿套装</span>
                          <div class="color_r fs24 num"><p class="fw_b fm_p">￥</p><em class="fs36">199</em><p>.00</p></div>
                        </div>
            </div>
        </div>
        <!-- 拼团
        <div class="group" style="display:none;">
            <div class="swiper-container swiper2" id="swiper02">
                <div class="swiper-wrapper">
                  <a href="#" class="swiper-slide"><img src="__STATIC__/mobile/default/images/group01.png" alt=""/>
                    <div class="info">
                      <div class="fs34 fw_b color_3 name">KENZO/高田贤一春夏新款</div>
                      <div class="tips"><span class="fs26 color_9">韩系时髦搭配指南</span><div class="color_r fs22 num"><p class="fw_b fm_p">￥</p><em>199</em><p>.00</p></div></div>
                    </div>
                  </a>
                  <a href="#" class="swiper-slide"><img src="__STATIC__/mobile/default/images/group01.png" alt=""/>
                    <div class="info">
                        <div class="fs34 fw_b color_3 name">KENZO/高田贤三春夏新款</div>
                        <div class="tips"><span class="fs26 color_9">韩系时髦搭配指南</span><div class="color_r fs22 num"><p class="fw_b fm_p">￥</p><em>199</em><p>.00</p></div></div>
                      </div>
                  </a>
                  <a href="#" class="swiper-slide"><img src="__STATIC__/mobile/default/images/group01.png" alt=""/>
                    <div class="info">
                        <div class="fs34 fw_b color_3 name">KENZO/高田贤五春夏新款</div>
                        <div class="tips"><span class="fs26 color_9">韩系时髦搭配指南</span><div class="color_r fs22 num"><p class="fw_b fm_p">￥</p><em>199</em><p>.00</p></div></div>
                      </div>
                  </a>
                  <a href="#" class="swiper-slide"><img src="__STATIC__/mobile/default/images/group01.png" alt=""/>
                    <div class="info">
                        <div class="fs34 fw_b color_3 name">KENZO/高田贤久春夏新款</div>
                        <div class="tips"><span class="fs26 color_9">韩系时髦搭配指南</span><div class="color_r fs22 num"><p class="fw_b fm_p">￥</p><em>199</em><p>.00</p></div></div>
                      </div>
                  </a>
                </div>
                <div class="swiper-pagination pagination2"></div>
              </div>
              <a href="#" class="fs26 color_3 groupMore">查看更多拼团</a>
        </div>
        <!-- 分类 -->
  <!-- {volist name="classGoods" id="cg" }
  {notempty name="cg.gooodsList"}
  <div class="trademark bg">
    <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$cg.cover}" alt="" class="lazy trademarkBG">
    <div class="hot-title flex pt-2 pb-1">
      <div class="flex-item left font-md color_3">大家都在买</div>
      <div class="fs26 color_9 flex-center"><van-icon name="replay"></van-icon>换一批</div>
    </div>
    <van-grid :gutter="10" :column-num="3" >
      {volist name="cg.gooodsList" id="goods" }
      <van-grid-item class="goods-item">
        <a href="{:url('goods/info',['id'=>$goods['goods_id']])}" class="goods">
          <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$goods.goods_thumb}" class="lazy goods-pic"
            alt="">
            <div class="goods-content">
              <span class="fs26 color_3">{$goods.goods_name}</span>
              <div class="color_r fs20 num">
                <p class="fw_b fm_p">￥<em class="fs30">{$goods.exp_price[0]}</em>.{$goods.exp_price[1]}</p>
              </div>
            </div>
        </a>
      </van-grid-item>
      {/volist}

    </van-grid>
    <div class="googslist">
      {volist name="cg.gooodsList" id="goods" }

      <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">
        <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$goods.goods_thumb}" class="lazy"
          alt="">
        <span class="fs26 color_3">{$goods.goods_name}</span>
        <div class="color_r fs20 num">
          <p class="fw_b fm_p">￥</p><em class="fs30">{$goods.exp_price[0]}</em>
          <p>.{$goods.exp_price[1]}</p>
        </div>
      </a>
      {/volist}
    </div>
    <a href="{:url('goods/index',['cid'=>$cg['id']])}" class="fs26 color_3 trademarkMore">查看更多</a>
  </div>
  {/notempty}
  {/volist} -->

  <div class="trademark">
    <!-- <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$cg.cover}" alt="" class="lazy trademarkBG"> -->
    <div class="hot-title flex pt-2 pb-1">
      <div class="flex-item left font-md color_3">精品推荐</div>
      <a href="{:url('goods/index',['is_best'=>1])}" class="flex-center"><span class="fs26 color_9">更多</span><img
          src="__STATIC__/mobile/default/images/rightIcon.png" alt="" style="width: 6px;"></a>
    </div>
    <van-grid :gutter="10" :column-num="2">
      {volist name="bestGoods" id="goods" }
      <van-grid-item class="goods-item">
        <div class="goods goodss">
        	<i></i>
          <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">
            <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$goods.goods_thumb}"
              class="lazy goods-pic" alt="">
          </a>
          <div class="goods-content">
            <span class="fs26 color_3 van-multi-ellipsis--l1">{$goods.goods_name}</span>
            <div class="color_r fs20 num">
              <p class="fw_b fm_p">￥<em class="fs30">{$goods.exp_price[0]}</em>.{$goods.exp_price[1]}</p>
            </div>
            <div class="flex-center line-2">
              <!--<span class="fs20 color_3 flex-item">{$goods.sale_num+$goods.virtual_sale}人付款</span>-->
              <span class="fs20 color_3 flex-item">库存{$goods.goods_number}</span>
              <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">
                <el-tag size="mini" type="warning">购买</el-tag>
              </a>
            </div>
          </div>
        </div>
      </van-grid-item>
      {/volist}

    </van-grid>
  </div>
  <div class="trademark ">
    <!-- <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$cg.cover}" alt="" class="lazy trademarkBG"> -->
    <div class="hot-title flex pt-2 pb-1">
      <div class="flex-item left font-md color_3">热销商品</div>
      <a href="{:url('goods/index',['is_best'=>1])}" class="flex-center"><span class="fs26 color_9">更多</span><img
          src="__STATIC__/mobile/default/images/rightIcon.png" alt="" style="width: 6px;"></a>
    </div>
    <van-grid :gutter="10" :column-num="2">
      {volist name="hotGoods" id="goods" }
      <van-grid-item class="goods-item">
        <div class="goods goodsss">
        	<i></i>
          <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">
            <img src="__STATIC__/mobile/default/images/loading.svg" width="100%" data-original="{$goods.goods_thumb}"
              class="lazy goods-pic" alt="">
          </a>
          <div class="goods-content">
            <span class="fs26 color_3 van-multi-ellipsis--l1">{$goods.goods_name}</span>
            <div class="color_r fs20 num">
              <p class="fw_b fm_p">￥<em class="fs30">{$goods.exp_price[0]}</em>.{$goods.exp_price[1]}</p>
            </div>
            <div class="flex-center line-2">
              <!--<span class="fs20 color_3 flex-item">{$goods.sale_num+$goods.virtual_sale}人付款</span>-->
              <span class="fs20 color_3 flex-item">库存{$goods.goods_number}</span>
              <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">
                <el-tag size="mini" type="warning">购买</el-tag>
              </a>
            </div>
          </div>
        </div>
      </van-grid-item>
      {/volist}

    </van-grid>
  </div>

</div>
{include file="layouts@bottom" /}
</div>
{/block}
{block name="footer"}
<script src="__STATIC__/mobile/default/js/Swiper-4.0.7/swiper.min.js"></script>
<script src="__STATIC__/built/pages/home.js"></script>
<script>
  $(function () {
    $('#app').show();
    swiper1 = createSwiper(1);
    swiper2 = createSwiper(2);
    $('.topTips .cell_ft p').on('click', function () {
      $('.model').show()
    })
    $('.topTips .cell_ft img').on('click', function () {
      $('.topTips').hide()
    })
    $('.closeModel').on('click', function () {
      $('.model').hide()
    })
  });

  function createSwiper(index) {
    var swiper = new Swiper(".swiper" + index, {
      pagination: {
        el: ".pagination" + index
      },
      paginationClickable: true,
      observer: true,
      observeParents: true,
      loop: true,
      lazy: { loadPrevNext: true },
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      onSlideChangeEnd: function (swiper) {
        swiper.update(); //swiper更新
      }
    });
    return swiper;
  }
</script>
{/block}